<html>
	<head>
		<title>m-Event</title>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
		<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
		<script src="js/jquery.validate.js"></script>
		<script src="js/jquery.validate.min.js"></script>
	</head>
	<body>
<script type="text/javascript">
function resetTextFields()
        {
            $("#email").val("");
            $("#pass").val("");
        }
 
        function onSuccess(data, status)
        {
            resetTextFields();
            // Notify the user the new post was saved
            $("#notification").fadeIn(2000);
            data = $.trim(data);
            if(data == "OK")
            {
                $("#notification").css("background-color", "#ffff00");
                $("#notification").text("Login Success");
				$.mobile.changePage("member_page.html");
				
            }
            else
            {
                $("#notification").css("background-color", "#ff0000");
                $("#notification").text("Registration Failed");
            }
            $("#notification").fadeOut(10000);
			//$.mobile.changePage($("#indexPage"));
        }

 $(document).ready(function() {
			$("#submit").click(function(){
			$("#login").validate();
			if($("#login").valid()){
                var formData = $("#login").serialize();
 
                $.ajax({
                    type: "POST",
                    url: "/app/mobile-event-portal/db/loginService.php",
                    cache: false,
                    data: formData,
                    success: onSuccess,
                });
			}
 
                return false;
            });
 
            $("#cancel").click(function(){
                resetTextFields();
            });
 
            $("#refresh").click(function(){
                location.reload();
            });
			
        });
 

</script>
<div data-role="page" id="registerPage" data-theme="b">
		
		<div data-role="header" data-position="fixed">
			<h1>Login</h1>
		</div>
		
		<div data-role="content">
			<div data-role="content">
			<form id="login">
				<div data-role="fieldcontain">
					<label for="email">Email</label>
					<input type="text" name="email" id="email" value="" class="required"/>
					<label for="pass">Password</label>
					<input type="text" name="pass" id="pass" value="" class="required"/>
					<fieldset class="ui-grid-a">
                            <div class="ui-block-a"><a href="index.html" rel="external" id="cancel" data-role="button" data-theme="c">Cancel</a></div>
                            <div class="ui-block-b"><button data-theme="b" id="submit" type="submit">Submit</button></div>
                    </fieldset>
					<h3 id="notification"></h3>
				</div>
			</form>
			</div>
		</div>
		
		<div data-role="footer" data-position="fixed">
			<h1>MEP-Mobile Event Portal</h1>
		</div>
	</div>
	</body>
</html>